<!DOCTYPE html>
<html style="background-color: #fff;">
   <head>
       <meta charset="utf-8">
        <link rel="stylesheet" href="/graph-benchmark/layui/css/layui.css"  media="all">
	    <link rel="stylesheet" href="/graph-benchmark/layui/css/admin.css" media="all">
	    <link rel="stylesheet" href="/graph-benchmark/layui/css/cascader.css" media="all">
   </head>
   <style>

/* loading css start*/
  /* Toast */
    .ibox {clear:both;margin: 0px;padding: 0px;width:100%;}
    .ibox .ibox-content {clear: both;line-height: normal;padding:25px;}
    .web_transparent {position: fixed;z-index: 1000;top: 0;right: 0;left: 0;bottom: 0;}
    .web-toast {position: fixed;z-index: 5000;height: 90px;width: 16em;min-height: 4em;top: 365px;margin-left: 120px;background: rgba(40, 40, 40, 0.75);text-align: center;border-radius: 5px;color: #FFFFFF;} 
    .web-toast_content { font-size: 16px;}
    .sk-spinner-three-bounce.sk-spinner{margin: 20px auto 10px;text-align: center; }
    .sk-spinner-three-bounce div {width: 18px;height: 18px;background-color: #f6296d;border-radius: 100%;display: inline-block;-webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out;animation: sk-threeBounceDelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
    .sk-spinner-three-bounce .sk-bounce1 {-webkit-animation-delay: -.32s;animation-delay: -.32s;}
    .sk-spinner-three-bounce .sk-bounce2 {-webkit-animation-delay: -.16s;animation-delay: -.16s;}
    @-webkit-keyframes sk-threeBounceDelay {
        0%,100%,80% {-webkit-transform: scale(0);transform: scale(0);}
        40% {-webkit-transform: scale(1);transform: scale(1);}
    }
    @keyframes sk-threeBounceDelay {
    0%,100%,80% {-webkit-transform: scale(0);transform: scale(0);}
    40% {-webkit-transform: scale(1);transform: scale(1);}
    }
    /*spinner*/
    .pinkspin{color:#ef1a60;}
    .greenspin{color:#07b30b;}
     /* loading css end*/
</style>
   <body>
   <div class="layui-form-item" style="margin-top:20px;">
        <label class="layui-form-label">展示图</label>
        <div class="layui-input-block" >
            <input type="text" id="a" class="layui-input" placeholder="请选择要展示的图数据集" readonly="readonly">
        </div>
    </div>
    
    <!--  <label class="layui-form-label">复选框</label> -->
    <div class="layui-input-block1" style="margin-left:22px;">
      <input type="checkbox" name="zylj" checked="checked"  onclick="checkboxOnclick(this,0)">专用零件&nbsp;
      <input type="checkbox" name="zylj"  checked="checked" onclick="checkboxOnclick(this,1)">企标件 &nbsp;
      <input type="checkbox" name="zylj" checked="checked" onclick="checkboxOnclick(this,2)">机加件&nbsp;
      <input type="checkbox" name="zylj" checked="checked" onclick="checkboxOnclick(this,3)">国标件&nbsp;
      <input type="checkbox" name="zylj" checked="checked" onclick="checkboxOnclick(this,4)">非标外购件&nbsp;
      <input type="checkbox" name="zylj" checked="checked" onclick="checkboxOnclick(this,5)">专用部件&nbsp;
      <input type="checkbox" name="zylj" checked="checked" onclick="checkboxOnclick(this,6)">产品配套&nbsp;
    </div>
    
    
    <div id="container" style="height:800px ;width:800px;"></div>
    
    <script type="text/javascript" src="/graph-benchmark/views/js/echarts.js"></script>
       <script type="text/javascript" src="/graph-benchmark/views/js/jquery.js"></script>
    <script src="/graph-benchmark/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/graph-benchmark/views/js/loading.js"></script> 
    <script type="text/javascript">
    
    var g_graphNames;
    var g_nodes =  [];
    var g_edges = [];
    
    layui.config({
        base: "/graph-benchmark/lay/modules/"
    }).use(["jquery","cascader"], function(){	 
        var $ = layui.jquery;
        var datas = [];
        //----ajax start--
     	$.ajax({
        url: 'highEchart/getContentList',
        success: function(redata) {
    		//console.log(redata.length)
    		for (var k = 0; k < redata.length-1; k++){
    			var ele = {}
    		//	console.log(redata[k].split("&")[1] +"("+redata[k].split("&")[0]+")")
    			ele.value = redata[k].split("&")[1]
    			ele.label = redata[k].split("&")[1] +"("+redata[k].split("&")[0]+")"
    			datas.push(ele)
    		}
    		//console.log(datas)
    		 var cascader = layui.cascader;
    	     cascader({
    	     	    elem:"#a",
    	         data: datas,
    	         success: function (valData,labelData) {
    	           //  console.log(valData);
    	          //   console.log(labelData);
    	             requestData(valData)
    	             g_graphNames = valData
    	             //console.log("kkk")
    	         }
    	     });
        },
        cache: false
      });
     //----ajax end--
    });
  
    
   //--requestdata start---- 
    function requestData(graphNames) {
/*     	//console.log("jjj")
    	document.getElementById("canvas1").innerHTML =  ""; */
    	 Init.WebToast("BOM图绘制中...");
   
    	  var nodes = []
    	//  var nodes2=[]
    	  var edges = []
    	  var displayID
    	  
    	  $.ajax({
    	    url: 'highEchart/getGraph',
    	    data: {graphName:escape(graphNames)},
    	    success: function(data) {
    	   // 	console.log(data.length)
    	      	console.log(data)
    	      	var nodeids=[]
    	      	for(i=0;i<data.length;i++){
    	      		var node11 = {}
    	      		var node22 = {}
    	      		var rel11={}
    	      		
    	      		var node1 = data[i].split("&")[0]
    	      		node11.id = node1.split(",")[0]
    	      		node11.name = node1.split(",")[1]
    	      		node11.wllx = node1.split(",")[2]
    	      		
    	      		if(node11.wllx=="专用零件"){
        		 		node11.category = 0
        		 	}else if(node11.wllx=="企标件"){
        		 		node11.category = 1
        		 	}else if(node11.wllx=="机加件"){
    		 			node11.category = 2
	    		 	}else if(node11.wllx=="国标件"){
	    		 		node11.category = 3
	    		 	}else if(node11.wllx=="非标外购件"){
	    		 		node11.category = 4
	    		 	}else if(node11.wllx=="专用部件"){
	    		 		node11.category = 5
	    		 	}else if(node11.wllx=="产品配套"){
	    		 		node11.category = 6
	    		 	}
	    	    	    	node11.symbolSize = 18
    	      		
        	   		var node2 = data[i].split("&")[1]
    	      		node22.id = node2.split(",")[0]
    	      		node22.name = node2.split(",")[1]
    	      		node22.wllx = node2.split(",")[2]
	    	    	    	if(node22.wllx=="专用零件"){
        		 		node22.category = 0
        		 	}else if(node22.wllx=="企标件"){
        		 		node22.category = 1
        		 	}else if(node22.wllx=="机加件"){
    		 			node22.category = 2
    	    		 	}else if(node22.wllx=="国标件"){
    	    		 		node22.category = 3
    	    		 	}else if(node22.wllx=="非标外购件"){
    	    		 		node22.category = 4
    	    		 	}else if(node22.wllx=="专用部件"){
    	    		 		node22.category = 5
    	    		 	}else if(node22.wllx=="产品配套"){
    	    		 		node22.category = 6
    	    		 	}
    	    	    	    	node22.symbolSize = 18
    	    	    	
    	      		
        	   		var rel = data[i].split("&")[2]
    	      		rel11.id = rel.split(",")[0]
    	      		rel11.source = rel.split(",")[1]
    	      		rel11.target = rel.split(",")[2]
				
    	      		
    	      		if(!nodeids.includes(node11.id)){
    	      			nodeids.push(node11.id)
    	      		 	nodes.push(node11)
    	    	    	    	}
    	    	    	    	if(!nodeids.includes(node22.id)){
    	    	    	    		nodeids.push(node22.id)
  	        	        nodes.push(node22)
   	        	    	}
    	    	    	    	edges.push(rel11)
    	      	}
    	   
    	     	g_nodes = nodes;
    	     	g_edges = edges;
    	     	console.log(nodes)
    	     	console.log(edges)
    	      
    	   
    	     	//停止加载框
    			Init.ClearToast("#webToast", 1)
    	    	
		      var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	app.title = '图数据展示';

//myChart.showLoading();
    //myChart.hideLoading();

	var categories = ["专用零件","企标件","机加件","国标件","非标外购件","专用部件","产品配套"];
 
    option = {
        title: {
            text: 'BOM部件信息',
            subtext: 'Default layout',
            top: 'bottom',
            left: 'right'
        },
        tooltip: {},
        legend: [{
            // selectedMode: 'single',
            data: categories.map(function (a) {
                return a.name;
            })
        }],
        animation: false,
        series : [
            {
                name: 'BOM部件',
                type: 'graph',
                layout: 'force',
                data: nodes,
                links: edges,
                categories: categories,
                roam: true,
                label: {
                    normal: {
                        position: 'right'
                    }
                },
                force: {
                    repulsion: 150
                }
            }
        ]
    };

    myChart.setOption(option);
	
	if (option && typeof option === "object") {
	    myChart.setOption(option, true);
	}
    	    	
    	    },
    	    cache: false
    	  });
    	} 
	//----requestdata end--
    </script>
    
   </body>
</html>